<template>
    <div class="second-comp">
        <el-card shadow="hover">
            <template #header>
                <!-- 1.菜单 -->
                <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect">
                    <el-menu-item index="1">销售额</el-menu-item>
                    <el-menu-item index="2">访问量</el-menu-item>
                </el-menu>
                <div class="right">
                    <!-- 2.按钮组 -->
                    <el-radio-group v-model="radio">
                        <el-radio-button label="今日" value="今日"></el-radio-button>
                        <el-radio-button label="本周" value="本周"></el-radio-button>
                        <el-radio-button label="本月" value="本月"></el-radio-button>
                        <el-radio-button label="今年" value="今年"></el-radio-button>
                    </el-radio-group>
                    <!-- 3.日期选择 -->
                    <el-date-picker
                        type="daterange"
                        v-model="dateRange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :shortcuts="shortcuts"
                    ></el-date-picker>
                </div>
            </template>
            <template #default>
                <div class="container">
                    <div class="left-chart">
                        <v-chart :option="option"></v-chart>
                    </div>
                    <div class="right-list">
                        <div class="title">排行榜</div>
                        <div class="list-item" v-for="n in rankLists">
                            <span
                                :class="{
                                    highlight: n.no <= 3,
                                }"
                            >{{ n.no }}</span>
                            <span>{{n.title}}</span>
                            <span>{{n.sales}}</span>
                        </div>
                    </div>
                </div>
            </template>
        </el-card>
    </div>
</template>

<script setup>
import {ref ,onMounted} from 'vue'
import { getSalesData } from '@/api'

const activeIndex = ref('1')
const radio = ref('今日')
const dateRange = ref('')
const option = ref({})

const salesData = ref('')
const rankLists = ref('')

const shortcuts = [
    {
        text:'最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start,end]
        }
    },
    {
        text:'最近一月',
        value:() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.setTime() - 3600 * 1000 * 24 * 30)
            return [start,end]
        }
    },
    {
        text:'最近三月',
        value:() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.setTime() - 3600 *1000 * 24 *90)
            return [start,end]
        }
    }
]

const renderChart = (v1,v2) => {
    option.value = {
        title:{
            text:'年度销售额',
            textStype:{
                fontSize:14,
            }
        },
        grid:{
            left:40,
        },
        xAxis:{
            type:'category',
            data:v1,
            //X轴的刻度对齐label标签
            axisTick:{
                alignWithLabel:true,
            }
        },
        yAxis:{
            type:'value',
            //y轴的刻度线设置为虚线
            splitLine:{
                lineStype:{
                    type:'dotted',
                }
            }
        },
        series:{
            type:'bar',
            data:v2,
            barWidth:'40%',
            //item的颜色
            itemStyle:{
                color:'skyblue'
            }
        }
    }
}

const handleSelect = (index) => {
    const {
        saleFulleYear,
        saleFulleYearAxis,
        saleRank,
        visitFullYear,
        visitFullYeadAxis,
        visitRank
    } = salesData.value

    if(index === '1'){
        renderChart(saleFulleYearAxis,saleFulleYear)
        rankLists.value = saleRank
    }else if (index === '2'){
        renderChart(visitFullYeadAxis,visitFullYear)
        rankLists.value = visitRank
    }
}
onMounted(async() => {
    salesData.value = await getSalesData()
    // console.log(salesData.value,'salesData')
    const {saleFulleYear,saleFulleYearAxis,saleRank} = salesData.value

    //渲染图表
    renderChart(saleFulleYearAxis,saleFulleYear)

    //渲染列表
    rankLists.value = saleRank

})
</script>

<style land="scss" scoped>
.second-comp{
    position: relative;
    margin-top: 20px;
    :deep(.el-card__header){
        padding: 0;
        border: none;
        .el-menu{
            padding-left: 50px;
        }
        .right{
            position: absolute;
            top: 15px;
            right: 2px;
            font-size: 0;
            .el-radio-group{
                margin-right: 10px;
            }
        }
    }
    .container{
        display: flex;
        .left-chart{
            flex: 0 0 70%;
            height: 434px;
        }
        .right-list{
            flex: 1;
            .title{
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 600;
            }
            .list-item{
                margin: 20px 0;
                display: flex;
                align-items: center;
                gap: 20px;
                span{
                    font-size: 14px;
                    color: #464545;
                    &:nth-child(1){
                        width: 20px;
                        height: 20px;
                        border-radius: 10px;
                        text-align: center;
                        line-height: 20px;
                    }
                    &:nth-child(2){
                        flex: 1;
                    }
                    &.highlight{
                        background-color: #09b3f7;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>